<template>
  <div>
    <!--    文章标题-->
    <div class="block">文章标题</div>
    <div style="margin-bottom: 15px">
      <el-input v-model="form.title" placeholder="请输入文章标题" />
    </div>
    <!--    文章编辑-->
    <div class="block">文章编辑</div>
    <editor
      ref="toastuiEditor"
      :initial-value="form.editorText"
      :options="editorOptions"
      height="600px"
    />
    <!--    文章描述-->
    <div class="block">文章描述</div>
    <el-input v-model="form.description" :rows="6" type="textarea" />

    <!--    文章头图-->

    <upload v-model="form.thumb" upload-title="文章头图" />
    <!--    文章分类-->
    <div class="block">选择分类</div>
    <el-select @change="changSelect" v-model="form.select" placeholder="请选择文章分类">
      <el-option
        v-for="item in blogType"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <!--    -->
    <div class="btn">
      <el-button type="primary" style="margin-top: 15px" @click="addArticle">{{ btnName }}</el-button>
    </div>
  </div>
</template>

<script>
import { Editor } from '@toast-ui/vue-editor'
import '@toast-ui/editor/dist/toastui-editor.css'
import upload from '@/components/upload'
import { getBlogType } from '@/api/blogType'
import '@toast-ui/editor/dist/i18n/zh-cn'
import { findOneBlog } from '@/api/blog'

export default {
  name: 'Index',
  components: {
    editor: Editor,
    upload
  },
  props: {
    id: {
      default: null
    }
  },
  data() {
    return {
      form: {
        title: '', // 文章标题
        editorText: '', // 文章内容
        description: '', // 文章描述
        thumb: '', // 文章头图
        select: ''
      },
      editorOptions: {
        language: 'zh-CN'
      },
      btnName: '发布文章',
      blogType: [] // 博客分类
    }
  },
  async created() {
    const result = await getBlogType()
    this.blogType = result.data
    if (this.id) {
      this.btnName = '确认修改'
      const data = await findOneBlog(this.id)
      this.form = data.data
      this.form.select = data.data.category === null ? '' : data.data.category.id
      this.$refs.toastuiEditor.invoke('setHTML', data.data.htmlContent)
    }
  },
  methods: {
    addArticle() {
      const html = this.$refs.toastuiEditor.invoke('getHTML') // 将编辑其中的转为html结构，注意大小写
      const markdown = this.$refs.toastuiEditor.invoke('getMarkdown') // 将编辑其中的转为html结构，注意大小写
      // 组装
      const obj = {
        title: this.form.title,
        description: this.form.description,
        createDate: new Date().getTime(),
        categoryId: this.form.select,
        toc: [],
        htmlContent: html,
        thumb: this.form.thumb,
        markdownContent: markdown
      }
      const data = {
        data: obj,
        id: this.id
      }
      if (obj.title && obj.description && obj.htmlContent && obj.categoryId) {
        this.$emit('article', data)
      } else {
        this.$message.error('请填写所有内容')
      }
    },
    changSelect() {
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
  .block{
    margin: 15px 0;
    font-weight: 100;
  }
</style>
